<template>
  <div class="container">
    <el-card class="hr-block">
      <el-header class="header">
        <span class="SubjectName">学科名称</span>
        <el-input
          class="input"
          v-model="page.subjectName"
          placeholder="请输入内容"
        >
        </el-input>
        <el-button @click="page.subjectName = ''">清除</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button
          type="success"
          class="addSubject el-icon-edit"
          @click="addsub"
        >
          新增学科</el-button
        >
      </el-header>

      <el-alert
        :title="`数据一共${this.page.total}条`"
        class="alert"
        type="info"
        show-icon
      >
      </el-alert>

      <el-table
        style="width: 100%"
        :data="list"
        :header-cell-style="{ background: '#fafafa', color: '#333' }"
      >
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column prop="subjectName" label="学科名称" align="center" />
        <el-table-column prop="username" label="创建者" align="center" />
        <el-table-column width="170px" label="创建日期" align="center">
          <template v-slot="row">
            <span>{{ row.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示" width="130px" align="center">
          <template v-slot="row">
            <span>{{ row.row.isFrontDisplay | isShow }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
          align="center"
        />
        <el-table-column prop="tags" label="标签" align="center" />
        <el-table-column prop="totals" label="题目数量" align="center" />
        <el-table-column label="操作" width="230px" align="center">
          <template v-slot="row">
            <el-button type="text" @click="directorys(row.row)"
              >学科分类</el-button
            >
            <el-button type="text" @click="tags(row.row)">学科标签</el-button>
            <el-button type="text" @click="edit(row.row)">修改</el-button>
            <el-button type="text" @click="del(row.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <!-- 分页组件 -->
        <el-pagination
          layout="sizes,prev,pager,next,jumper"
          background
          :total="page.total"
          :current-page="page.page"
          :page-size="page.pagesize"
          :page-sizes="page.pagesizes"
          @current-change="PageChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </el-row>
    </el-card>
    <SubjectsAdd
      ref="data"
      :dialog-visible="dialogVisible"
      @IfDialogVisible="IfDialogVisible"
      @tlist="tlist"
      :editId="editId"
    ></SubjectsAdd>
  </div>
</template>

<script>
import { list, detail, remove } from "@/api/hmmm/subjects";
import SubjectsAdd from "@/module-hmmm/components/subjects-add";
export default {
  data() {
    return {
      searchList: [],
      list: [],
      editId: null,
      dialogVisible: false,
      page: {
        subjectName: "",
        page: 1,
        pagesize: 10,
        total: 0,
        pagesizes: [5, 10, 20],
      },
    };
  },
  created() {
    this.tlist();
  },
  components: { SubjectsAdd },
  methods: {
    // 跳转标签
    tags(row) {
      this.$router.push({
        path: "/subjects/tags",
        query: {
          id: row.id,
          name: row.subjectName,
        },
      });
    },
    // 跳转学科
    directorys(row) {
      this.$router.push({
        path: "/subjects/directorys",
        query: {
          id: row.id,
          name: row.subjectName,
        },
      });
    },
    // 删除
    del(data) {
      this.$confirm("你确定要删除这个学科吗", "提示", {
        confirmButtonText: "我就是要删除",
        cancelButtonText: "算了算了,点错了",
        type: "warning",
      })
        .then(async () => {
          await remove(data);
          if (this.list.length == 1) {
            this.page.page = this.page.page - 1;
          }
          this.tlist();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 搜索
    search() {
      this.page.page = 1;
      this.tlist();
    },
    // 新增
    addsub() {
      this.editId = null;
      this.dialogVisible = true;
    },
    // 修改
    async edit(data) {
      const { data: res } = await detail(data);
      console.log(res);
      this.editId = data;
      this.dialogVisible = true;
      this.$refs.data.roleForm.name = res.subjectName;
      let isValue = res.isFrontDisplay;
      if (isValue == 1) {
        this.$refs.data.value = true;
      } else {
        this.$refs.data.value = false;
      }
    },
    // 列表获取
    async tlist() {
      const { data: res } = await list(
        this.page,
        this.pagesize,
        this.subjectName
      );
      this.list = res.items;
      this.page.total = res.counts;
      this.page.pagesize = +res.pagesize;
      // console.log(res);
    },
    // 页码切换
    PageChange(newPage) {
      this.page.page = newPage;
      this.tlist();
    },
    // 页码选择
    handleSizeChange(newPage) {
      this.page.pagesize = newPage;
      this.page.page = 1;
      this.tlist();
    },
    // 新增弹层
    IfDialogVisible() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.input {
  width: 220px;
  margin-left: 10px;
  margin-right: 10px;
}
.header {
  margin: 10px 5px;
}
.SubjectName {
  font-weight: 700;
}
.addSubject {
  float: right;
}
.hr-block {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 15px;
}
.alert {
  margin-bottom: 20px;
}
::v-deep .el-table th.is-leaf {
  border-bottom: 2px solid #ebeef5 !important;
}
</style>
